<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="blog-posts-events-demo">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:post="post"
            v-on:enlarge-text="postFontSize += 0.1"
            ></blog-post>
            <!-- 可以通过 $event 访问到被抛出的这个值： -->
            <!--  v-on:enlarge-text="postFontSize += $event" -->
        </div>
     </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    Vue.component('blog-post', {
    props: ['post'],
    template: `
        <div class="blog-post">
        <h3>{{ post.title }}</h3>
        <button  v-on:click="$emit('enlarge-text')">
            Enlarge text
        </button>
        <div v-html="post.content"></div>
        </div>
    `
    // 想让 <blog-post> 组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值：v-on:click="$emit('enlarge-text', 0.1)"
    })
    new Vue({
    el: '#blog-posts-events-demo',
    data: {
        posts: [{
            title:"vue",
            content:"....content....",
            id:1
        }],
        postFontSize: 1
    }
    })
</script>
</html>